<!--vue模板-->
<template>
  <div class="root">
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      closable
      addable
      @tab-add="add"
    >
      <template v-for="item in tabsOptions" :key="item.code">
        <el-tab-pane :label="item.name" :name="item.code">
          <DictList :pid="item.id" />
        </el-tab-pane>
      </template>
    </el-tabs>

    <!--引用组件-->
    <AddGroup
      ref="saveupdate"
      :visible="isShow"
      @close="isShow = false"
      @refreshData="queryGroupd"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { getDicById } from "@/api/product/product.js";
//引入组件
import AddGroup from "@/views/product/dic/AddGroup.vue";
import DictList from "@/views/product/dic/DictList.vue";

//默认选中的
const activeName = ref("");
const tabsOptions = ref([]);
const saveupdate = ref();

//是否显示新增
const isShow = ref(false);

function add() {
  isShow.value = true;
  saveupdate.value.init();
}

async function queryGroupd() {
  let res = await getDicById(0);
  if (res.code == 200) {
    tabsOptions.value = res.data;

    //列表中 第一项做为默认选 中
    if (tabsOptions.value.length > 0) {
      let tmp = tabsOptions.value[0];
      activeName.value = tmp.code;
    }
  }
}

onBeforeMount(() => {
  queryGroupd();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
  height: 100%;
  background-color: #fff;
}
</style>
